<template>
  <div>
  <Tou></Tou>
    <Second></Second>
    <div style="width: 1200px;background-color: #F7F8FC;margin: 0 auto">
      <el-upload
      class="avatar-uploader"
      action="http://localhost:8081/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="formLabelAlign.userPic" :src="formLabelAlign.userPic" class="avatar" style="border-radius: 100px">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
      <el-form label-position="right" label-width="80px" :model="formLabelAlign">
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.userName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
                    :type="[flag?'text':'password']"
                    v-model="formLabelAlign.userPass">
            <i slot="suffix"
               :class="[flag?'el-icon-minus':'el-icon-view']"
               style="margin-top:8px;font-size:18px;"
               autocomplete="auto"
               @click="flag=!flag" />
          </el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="formLabelAlign.userRelname.slice(0, 1)+'**'" ></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="formLabelAlign.userCare.slice(0,4)+'***'+formLabelAlign.userCare.slice(-4)"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formLabelAlign.userTel"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formLabelAlign.userMail"></el-input>
        </el-form-item>
        <el-form-item label="优待类型">
          <el-select v-model="formLabelAlign.userFlag"  placeholder="请选择">
            <el-option
              label="成人"
              :value="0">
            </el-option>
            <el-option
              label="学生"
              :value="1">
            </el-option>
            <el-option
              label="儿童"
              :value="2">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员积分">
          <el-input v-model="formLabelAlign.userVip" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" round style="margin-bottom: 20px" @click="modify">提交修改</el-button>
    </div>
  </div>
</template>

<script>
import Tou from "./tou.vue";
import Second from "./second.vue";

export default {
  name: "myInfo",
  components: {Second, Tou},
  data() {
    return {
      formLabelAlign: {
        userName: '',
        userPass: '',
        userRelname: '',
        userCare: '',
        userTel:'',
        userMail:'',
        userFlag: '',
        userVip:'',
        userPic:''
      },
      flag: false,
    }
  },
  methods:{
    handleAvatarSuccess(res, file) {
      // console.log(res.data)
      this.formLabelAlign.userPic = res.data;
      // console.log(this.formLabelAlign.userPic)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    findUser(){
      this.$axios.get('/user/user').then(res=>{
        if (res.data.code==200)
          this.formLabelAlign=res.data.data
        else
          this.$router.push("/login")
      })
    },
    modify(){
      this.$axios.post('/user/update',this.formLabelAlign)
        .then(res=>{
          if (res.data.code==200){
            alert("修改成功")
            this.findUser()
          }
          if (res.data.code==666){
            alert("修改成功")
            localStorage.clear()
            this.$router.push("/login")
          }
        })
    }
  },
  mounted() {
    this.findUser()
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
